import React, { useEffect, useState } from 'react';
import { useParams } from 'react-router-dom';
import style from './style.less';


const AlubmItem = ()=>{

    const {keywords} = useParams();
    const [data, setData] = useState(null);
    const requestType = 10;

    useEffect(async ()=>{
        const res = await React.$axios.get(`/search/?keywords=${keywords}&type=${requestType}`);
        console.log(res.data.result);
        const data = res.data.result.albums;
        setData([...data]);
    },[keywords])

    return (
        <ul className={style.albumItem}>
            {data && data.map((item,index)=>(
                <li key={index}>
                    <img src={item.blurPicUrl} alt="" />
                    <span>{item.name}</span>
                </li>
            ))}
        </ul>
    )
}

export default AlubmItem;
